<template>
    <div>
      <div class="w100 rowsc rowsm fs-24 fw-b col333 mb-20">互联网+挑战杯等比赛</div>
      <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">比赛名称：</div>
        <el-input v-model="name" placeholder="请输入比赛名称" class="w-400 input"></el-input>
      </div>

      <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">比赛时间：</div>
      <el-date-picker
      v-model="time"
      type="date"
      placeholder="请输入比赛时间">
    </el-date-picker>
    </div>
  
    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">级别：</div>
        <el-select v-model="choseLevel1" placeholder="选择比赛级别">
    <el-option
      v-for="item in levelList1"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
      </div>

      <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">等级：</div>
        <el-select v-model="choseLevel2" placeholder="选择等级">
    <el-option
      v-for="item in levelList2"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
      </div>

      <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">位次：</div>
        <el-select v-model="choseLevel3" placeholder="选择">
    <el-option
      v-for="item in levelList3"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
      </div>

      <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">团队负责人：</div>
        <div class="rows rowsm fs-20 col666">
          <div class="mr-10" v-if="user">{{user.name}} {{user.stNumber}}</div>
            <img src="../../../static/img/icon_sc-1.png" class="w-24 h-24 mr-10" alt="" v-if="user" @click="clearUser()">
            <img src="../../../static/img/icon_j-1.png" class="w-24 h-24" alt="" @click="choseStudent()">
        </div>
      </div>

      
  
  
      <div class="w100 bgff br-16 p-all-20 mb-20">
        <div class="fs-20 col333 fw-b mb-10">简要说明：</div>
        <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入您的劳动说明"
        class="input"
         v-model="info">
        </el-input>
      </div>
  
      <div class="w100 bgff br-16  pl-20 pr-20 trt mb-40" style="padding: 20px">
        <div class="fs-20 col333 fw-b" style="text-align: left; ">附件上传：</div>
        <el-upload
    class="upload-demo"
    :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
    :show-file-list="true"
    :multiple="false"
    :limit="6"
    :on-success="uploadSuccess"
    :on-error="uploadErr"
    :on-remove="delFile"
    :before-upload="beforeUpload"
    :disabled="isUploadSuccess"
    accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mp4, .mov, .avi"

    >
    <div class="rows rowsm">
          <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="">
          <div class="fs-20 col888">（可上传word、pdf、excel、图片、视频）</div>
        </div>
         <p class="mark">视频上传最大不超过100M</p>
  </el-upload>
        
      </div>
  
      <div class="w100 rowsc rowsm">
        <el-button  type="primary" 
        class="w-400 h-60 br-30 fs-24" 
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;" 
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    props: {
      type:{
        type:String
      },
      user:{
        default:null
      },
      inputData:{
        default:null
      }
    },
    data() {
      return {
        name:'',
        time:'',
        info:'',
        levelList1:[],
        choseLevel1:'',
        levelList2:[],
        choseLevel2:'',
        levelList3:[],
        choseLevel3:'',
        file:'',
      fileName:'',
      fileType:'',
      isUploadSuccess:false,
      proFileList:[]
      };
    },
    watch: {},
    computed: {},
    methods: {
      delFile(file){
        this.proFileList = this.proFileList.filter(item => item.file != file.response.url)
      },
      beforeUpload(file){
          this.isUploadSuccess = true
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.warning('上传的文件大小不能超过 100MB!');
        this.isUploadSuccess = false
      }
      return isLt100M;
    },
      submit(){
        if(!this.name) return this.$notify({title: '提示',message: '请输入项目名'});
      if(!this.user) return this.$notify({title: '提示',message: '请选择负责人'});
      if(!this.choseLevel1) return this.$notify({title: '提示',message: '请选择级别'});
      if(!this.choseLevel2) return this.$notify({title: '提示',message: '请选择等级'});
      if(!this.choseLevel3) return this.$notify({title: '提示',message: '请选择位次'});
      // if(!this.unit) return this.$notify({title: '提示',message: '请输入单位'});
      if(!this.time) return this.$notify({title: '提示',message: '请选择时间'});
      if(!this.info) return this.$notify({title: '提示',message: '请输入内容'});
       if(this.proFileList.length == 0) return this.$notify({title: '提示',message: '请上传文件'});
      
      let data = {
          type:this.type,
          name:this.name,
          bgTime:this.time,
          jbName:this.choseLevel1,
          djName:this.choseLevel2,
          wcName:this.choseLevel3,
          content:this.info,
          file:this.file,
          fileType:this.fileType,
          fileName:this.fileName,
          proLdUserList:[
            {
              userId:this.user.userId
            }
          ],
          proFileList:this.proFileList
        }

        this.$axios.post('prold/add',{...data}).then(res => {
        this.$notify({
          title: '提示',
          message: res.data.msg
        });
        if(res.data.code != 200) return 
        setTimeout(() => {
          this.$emit('back')
        },1000)
      })
      },
      clearUser(){
        this.$emit('clearUser')
      },
      choseStudent(){
        let data = {
          type:this.type,
          name:this.name,
          bgTime:this.time,
          jbName:this.choseLevel1,
          djName:this.choseLevel2,
          wcName:this.choseLevel3,
          content:this.info,
          file:this.file,
          fileType:this.fileType,
          fileName:this.fileName
        }
        this.$emit('choseStudent',data)
      },
      uploadSuccess(response, file, fileList){
       if(response.code == 200){
      console.log('success');
      console.log(response, file, fileList)
      this.proFileList.push({
        file:response.url,
        fileName:response.originalFilename,
        fileType:file.raw.type.split('/')[0] == 'image' || file.raw.type.split('/')[0] == 'video' ? file.raw.type.split('/')[0] : 'file'
      })
     this.$message.success('上传成功');
      this.isUploadSuccess = false
    }else{
      fileList.splice(fileList.indexOf(file),1);
      this.$notify({title: '提示',message: response.msg || '上传失败'});
       this.isUploadSuccess = false
    }
      },
      uploadErr(err, file, fileList){
        console.log('err');
        console.log(err, file, fileList)
      },
      getList(){
        this.$axios.post('proldconfig/listJb',{}).then(res => {
          if(res.data.code != 200) return this.$notify({
            title: '提示',
            message: res.data.msg
          });
          let {rows} = res.data
          this.levelList1 = rows.map(item => item.name)
        })
        this.$axios.post('proldconfig/listDj',{}).then(res => {
          if(res.data.code != 200) return this.$notify({
            title: '提示',
            message: res.data.msg
          });
          let {rows} = res.data
          this.levelList2 = rows.map(item => item.name)
        })
        this.$axios.post('proldconfig/listWc',{}).then(res => {
          if(res.data.code != 200) return this.$notify({
            title: '提示',
            message: res.data.msg
          });
          let {rows} = res.data
          this.levelList3 = rows.map(item => item.name)
        })
      }
    },
    created() {
      this.getList()
      if(this.inputData) {
        let data = this.inputData
        this.name = data.name
        this.time = data.bgTime
        this.choseLevel1 = data.jbName
        this.choseLevel2 = data.djName
        this.choseLevel3 = data.wcName
        this.info = data.content
        this.file = data.file
        this.fileType = data.fileType
        this.fileName = data.fileName
      }
    },
    mounted() {}
  };
  </script>
  <style lang="scss" scoped>
  .input /deep/ .el-input__inner  {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 20px;
    text-align: right;
  }
  </style>